<script setup>
import * as echarts from 'echarts';
import {ref, defineProps, onMounted, nextTick} from 'vue'
import {getVisionChartData} from "@/api/eyeCare.js";

const props = defineProps({
  patientId: String
})

const active = ref(0)
const show = ref(false)

const echartRef = ref(null)
const echartRef2 = ref(null)
const echartRef3 = ref(null)

let leftData = []
let rightData = []
let leftData2 = []
let rightData2 = []

onMounted(async () => {
  const resp = await getVisionChartData(10, props.patientId)

  resp.data.forEach(item => {
    if (item.type === 1) {
      leftData.push([item.healTime, item.sphericalMirror, item])
      leftData2.push([item.healTime, item.ocularAxis, item])
    } else {
      rightData.push([item.healTime, item.sphericalMirror, item])
      rightData2.push([item.healTime, item.ocularAxis, item])
    }
  })

  drawChart(echartRef, ['左眼', '右眼'], [leftData, rightData], {type: 'value', inverse: true})
})

const onClickTab = async () => {
  await nextTick()
  if (active.value === 0) {
    drawChart(echartRef, ['左眼', '右眼'], [leftData, rightData], {type: 'value', inverse: true})
  } else if (active.value === 1) {
    const leftValues = leftData2.map(item => item[1]);
    const rightValues = rightData2.map(item => item[1]);

    const allValues = [...leftValues, ...rightValues];
    const maxValue = Math.max(...allValues);
    const minValue = Math.min(...allValues);

    drawChart(echartRef2, ['左眼', '右眼'], [leftData2, rightData2], {type: 'value', max: maxValue, min: minValue})
  } else {
    drawChart(echartRef3, ['左眼屈光', '右眼屈光', '左眼眼轴', '右眼眼轴'], [leftData, rightData, leftData2, rightData2], {type: 'value'})
  }
}

const drawChart = async (chartRef, legends, data, yAxis) => {
  const chart = echarts.init(chartRef.value);

  if (chartRef.value) {
    let series = []

    for (let i= 0;i<legends.length;i++) {
      series.push({
        data: data[i],
        type: 'line',
        name: legends[i],
        label: {
          show: true,
          position: 'top'
        },
      })
    }

    let option = {
      tooltip: {
        trigger: 'axis',
      },
      legend: {
        data: legends
      },
      xAxis: {
        type: 'time',
        boundaryGap: false, // 防止坐标轴两边留白
        splitLine: {
          show: false // 是否显示分割线
        },
        axisLabel: {
          showMaxLabel: true,
          splitNumber: 7,
          formatter: function (value, index, extra) {
            const date = new Date(value);
            const year = date.getFullYear();
            const month = date.getMonth() + 1;
            const day = date.getDate();
            const hours = date.getHours();
            if (hours !== 0) {
              return ''
            }
            // 返回格式化的日期字符串（YYYY-MM-DD）
            return `${year}-\n${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;

          }
        },
      },
      yAxis: {
        type: 'value',
      },
      series: series
    }
    if (yAxis) {
      option.yAxis = yAxis
    }
    chart.setOption(option)

    setTimeout(() => {
      chart.resize()
    })
  }
}

</script>

<template>
  <van-tabs v-model:active="active" type="card" style="margin-top: 10px" @click-tab="onClickTab">
    <van-tab title="散瞳/小瞳曲线">
      <div class="chart" ref="echartRef"/>
    </van-tab>
    <van-tab title="眼轴曲线">
      <div class="chart" ref="echartRef2"/>
    </van-tab>
    <van-tab title="散瞳/小瞳VS眼轴">
      <div class="chart" ref="echartRef3"/>
    </van-tab>
  </van-tabs>
<!--  <div class="tooltip-container">-->
<!--    <div class="tooltip-header">-->
<!--      <div>+150</div>-->
<!--      <div>-450</div>-->
<!--      <div>2023-05-01</div>-->
<!--      <div>1.5</div>-->
<!--      <div>-1.5</div>-->
<!--    </div>-->
<!--  </div>-->
  <van-popup v-model:show="show" position="bottom" :style="{ height: '30%' }" />
</template>

<style scoped lang="scss">
.chart {
  width: 100%;
  height: 25rem
}
.tooltip-container {
  padding: 0 16px;
  color: white;
  font-size: 16px;
  font-weight: bold;

  .tooltip-header {
    height: 5rem;
    display: flex;
    justify-content: space-around;
    background: linear-gradient(to right, #6c43b2, #4895b2);
  }
}
</style>